<script setup>

import TitleContentCard from '@/view/ai/components/TitleContentCard.vue';
import {ref,reactive} from 'vue'
const guides = reactive([
	{isOpen:false,ask:'如何重置我的密码？',answer: '重置密码'},
	{isOpen:false,ask:'我的电脑运行缓慢，我应该怎么办？',answer:'听力练习也很重要，可以听录音、播客或语言学习应用中的对话。 󰀡说话练习，可以和朋友、语言交换伙伴或使用语言学习应用进行。 󰀡写作练习，可以写日记、练习作文或参与在线论坛和社交媒体上的讨论。 󰀐利用技术工具： 󰀡使用语言学习应用程序，如Duolingo、HelloTalk、Memrise等。 󰀡利用在线词典、翻译工具'},
])
const itemClick = (index)=>{
	guides[index].isOpen = !guides[index].isOpen
}

</script>

<template>
<div>
	<title-content-card title="指南">
		<template #content>
			<div class="item" v-for="(item,index) in guides" :key="item.ask" @click="itemClick(index)">
				<div class="ask">
<!--					<img class="img" :src="'../../../../assets/icons/'+(item.isOpen?'down':'right')+'.png'"/>-->
					<img class="img" src="../../../../assets/icons/down.png" v-if="item.isOpen"/>
					<img class="img" src="../../../../assets/icons/right.png" v-else/>
					<span class="ask-content">{{item.ask}}</span>
				</div>
				<div class="answer" v-if="item.isOpen">
					<div class="answer-content">{{item.answer}}</div>
				</div>
			</div>
		</template>
	</title-content-card>
</div>
</template>

<style scoped lang="scss">
.item{
	margin-bottom: 28px;
	cursor: pointer;
}
.img{
	width: 24px;
	height: 24px;
	margin-right: 8px;
}
.ask{
	display: flex;
	flex-direction: row;
	align-items: center;
	.img{
		width: 24px;
		height: 24px;
	}
	.ask-content{
		font-weight: 430;
		font-size: 18px;
		color: #000000;
		line-height: 21px;
	}
}
.answer{
	padding: 16px 32px;
	background: #F5F5F5;
	margin-top: 16px;
	.answer-content{
		font-weight: 305;
		font-size: 18px;
		color: #000000;
		line-height: 31px;
	}
}
</style>
